<template>
  <div class="login-box">
    <el-form ref="UserFormRef" class="login-container" style="max-width: 400px" :model="UserForm" :rules="rules"
      label-width="auto" :size="formSize" @keyup.enter="submitForm(UserFormRef)">
      <h2 class="title">登&nbsp;&nbsp;录</h2>
      <el-form-item label="用户名：" prop="username">
        <el-input v-model="UserForm.username" style="opacity: 0.8" />
      </el-form-item>
      <el-form-item label="密码：" prop="password">
        <el-input type="password" v-model="UserForm.password" style="opacity: 0.8"
          @keyup.enter="submitForm(UserFormRef)" />
      </el-form-item>
      <el-form-item label="验证码：" prop="code">
        <el-input v-model="UserForm.code" style="opacity: 0.8; width: 35%;" />
        <img :src="codeUrl" alt="验证码" style="width: 90px; height: 35px; cursor: pointer;margin-left: 10px;"
          @click="getcodeurl()" @keyup.enter="submitForm(UserFormRef)" />
      </el-form-item>
      <el-form-item>
        <el-button class="btn" type="primary" @click="submitForm(UserFormRef)" style="opacity: 0.8">登录</el-button>
        <el-button class="btn" @click="resetForm(UserFormRef)" style="opacity: 0.8">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import router from '../router/index'

import { loginApi } from '@/api/common'
var Mock = require("mockjs")
interface User {
  username: string;
  password: string;
  code: string;
}

const formSize = ref<ComponentSize>('default')
const UserFormRef = ref<FormInstance>()
const UserForm = reactive<User>({
  username: 'admin',
  password: '123456',
  code: ''
})
const token = ref()
const getcodeurl = () => {
  token.value = Mock.Random.string(4)
  codeUrl.value = Mock.Random.dataImage("90x35", token.value)
}
onMounted(() => {
  getcodeurl()
})
const codeUrl = ref()
const rules = reactive<FormRules>({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
  ],
  code: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
  ]
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (UserForm.code != token.value) {
        ElMessage.error("验证码错误！")
        getcodeurl();
        UserForm.code = '';
        return
      }
      loginApi(UserForm).then(result => {
        if (result.data.code == 200) {
          if (result.data.data) {
            ElMessage.success("登录成功！");
            router.push('/home')
          }
          else {
            ElMessage.error("用户名或密码错误！")
          }
        }
        else {
          ElMessage.error("登录失败！")
        }
      }).catch(error => {
        ElMessage.error("服务器错误！");
      })
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>


<style src="" scoped>
html,
#app {
  width: 100%;
  height: 100%;
}

.login-box {
  font-family: "仿宋";
  margin: 0 auto;
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  background: url("../assets/images/login.webp") no-repeat 100% 100%;
  background-size: 100% 100%;
}

.title {
  text-align: center;
  margin: 20px auto;
  color: white;
}

.login-container {
  width: 400px;
  height: 340px;
  padding: 20px;
  padding-left: 40px;
  border-radius: 20px;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.3);
}

.login-container .el-input {
  display: inline-block;
  height: 35px;
  width: 100%;
}

.login-container .el-form-item {
  margin-bottom: 20px;
}

.btn {
  margin-top: 20px;
  margin-left: 20%;
}
</style>